<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{component/_layout :: layout(~{::title},~{::headTitle}, ~{::section},~{::link},~{::script})}">
<head>
    <meta charset="UTF-8">
    <title>巡查检查系统</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" th:href="@{/css/elementUI.css}">
    <link rel="stylesheet" th:href="@{/css/userInfo.css}">
</head>
<body>
<!--自定义头部标题-->
<headTitle>
    <h2 class="headTitle">创建巡查计划</h2>
</headTitle>
<!--自定义的主页样式-->
<section>
    <div id="app">
        <el-form :model="item" ref="ruleForm" label-width="100px" class="demo-ruleForm"
                 style="display: flex;justify-content: space-between">

            <el-form-item label="计划年度：" prop="year">
                <el-input v-model="item.year" placeholder="输录年份"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button @click="showModel" type="primary">添加数据</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="items">
            <el-table-column prop="inspectDate" label="巡查时间" width="160"></el-table-column>
            <el-table-column prop="inspectName" label="巡查人员" width="120"></el-table-column>
            <el-table-column prop="inspectPhone" label="巡查人员电话" width="120"></el-table-column>
            <el-table-column prop="inspectPurpose" label="巡查人员目的" width="150"></el-table-column>
            <el-table-column prop="inspectEquipment" label="巡查设备" width="100"></el-table-column>
            <el-table-column prop="inspectEquipmenttype" label="巡查设备类型" width="110"></el-table-column>
            <el-table-column prop="inspectCompanyid" label="巡查公司编码" width="130"></el-table-column>
            <el-table-column prop="inspectCompany" label="巡查公司名称" width="130"></el-table-column>
            <el-table-column prop="remark" label="备注" width="180"></el-table-column>
            <el-table-column align="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="removeItems(scope.$index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button v-if="items!=''&&items!=null" style="position: fixed;bottom: 5%; width: 10%;" @click="addItemsData">
            全部添加
        </el-button>
        <!--el-dialog详细信息-->
        <el-dialog title="添加子信息" :visible.sync="mcPlanDetailVisible" center width="50%">
            <el-date-picker style="width: 100%"
                            v-model="itemData.inspectDate"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
            </el-date-picker>
            <el-input placeholder="巡查人员" v-model="itemData.inspectName" clearable class="mcPlanInput"></el-input>
            <el-input placeholder="巡查人员电话" v-model="itemData.inspectPhone" clearable class="mcPlanInput"></el-input>
            <el-input placeholder="巡查人员目的" v-model="itemData.inspectPurpose" clearable class="mcPlanInput"></el-input>
            <el-input placeholder="巡查设备" v-model="itemData.inspectEquipment" clearable class="mcPlanInput"></el-input>
            <el-input placeholder="巡查设备类型" v-model="itemData.inspectEquipmenttype" clearable
                      class="mcPlanInput"></el-input>
            <el-select v-model="itemData.inspectCompany" @change="getKey" placeholder="请选择公司" style="width: 100%"
                       class="mcPlanInput">
                <el-option
                        v-for="item in sumCompan"
                        :key="item.code"
                        :label="item.name"
                        :value="item.name">
                </el-option>
            </el-select>
            <el-input placeholder="备注" v-model="itemData.remark" clearable class="mcPlanInput"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="mcPlanDetailVisible = false">取 消</el-button>
                <el-button type="primary" @click="addItems">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</section>

<script type="text/javascript">
    new Vue({
        el: '#app',
        data() {
            return {
                //添加子项目
                item: {
                    year: '',
                },
                //items 添加子项目
                items: [],
                //添加模态框展示
                mcPlanDetailVisible: false,
                itemData:
            {
                fhasinspect: "",
                inspectCompany: "",
                inspectCompanyid: "",
                inspectDate: "",
                inspectEquipment: "",
                inspectEquipmenttype: "",
                inspectId: "",
                inspectName: "",
                inspectPhone: "",
                inspectPurpose: "",
                remark: "",
            },
                //查询所有公司
                sumCompan: [],
            }
        },
        //加载事件
        created() {
            //查询公司信息
            axios.get(`/yyds/machine_system/sys-compan/list/1/900/`, {
                params: this.ps
            }).then(resp => {
                this.sumCompan = resp.data.map.items;
            });
        },
        //函数集群
        methods: {
            //添加数据
            addItems() {
                this.items.push(this.itemData)

                this.mcPlanDetailVisible = false
            },
            editItem(index) {
                this.mcPlanDetailVisible = true

                this.itemData = this.items[index];
            },
            removeItems(index) {
                this.items.splice(index)
            },
            //展示模态框
            showModel() {
                this.itemData = {
                    fhasinspect: "",
                    inspectCompany: "",
                    inspectCompanyid: "",
                    inspectDate: "",
                    inspectEquipment: "",
                    inspectEquipmenttype: "",
                    inspectId: "",
                    inspectName: "",
                    inspectPhone: "",
                    inspectPurpose: "",
                    remark: "",
                };
                this.mcPlanDetailVisible = true
            },
            getKey(name) {
                for (let i = 0; i < this.sumCompan.length; i++) {
                    if (this.sumCompan[i].name == name) {
                        this.itemData.inspectCompanyid = this.sumCompan[i].code;
                        break;
                    }
                }
            },
            //将数据添加到数据库
            addItemsData() {
                axios({
                    method:'post',
                    url:`/yyds/machine_system/mc-plan0/create/${this.item.year}`,
                    data: this.items
                }).then(resp => {
                    this.$message({
                        type: resp.data.code === 1 ? 'success' : 'error',
                        message: resp.data.message
                    })
                });
            }
        }
    })
</script>
</body>
</html>